<template>
	<!-- 在view外层添加渐变背景 -->
	<view class="container" :style="{minHeight: screenHeight + 'px'}">
		<!-- 添加卡片容器阴影 -->
		<view class="content-card">
			<!-- 图片区域增加遮罩层 -->
			<view class="image-wrapper">
				<image :src="item.PcMainImg" mode="aspectFill" class="main-image"></image>
				<view class="image-overlay"></view>
			</view>

			<!-- 标题区域增加图标 -->
			<view class="title-section">
				<view class="item-title">{{item.PcName}}<text class="category-tag">{{item.PcCategory}}</text>
				</view>
			</view>

			<!-- 警告信息样式升级 -->
			<view class="notice-card">
				<u-icon name="error" color="#e03131" size="28"></u-icon>
				<text class="item-desc">注意：下单后不可以退款</text>
			</view>

			<!-- 价格展示优化 -->
			<view class="price-section">
				<text class="price-label">优惠价格</text>
				<text class="item-price">￥4</text>
			</view>

			<!-- 表单区域卡片化 -->
			<view class="form-card">
				<view class="form-item">
					<text class="form-label">购买份数</text>
					<u-number-box v-model="copies" @change="valChange" :min="1" button-size="36" input-width="100"
						integer></u-number-box>
				</view>

				<!-- 	<view class="form-item">
					<text class="form-label">购买日期</text>
					<text class="date-display">{{nowTime}}</text>
				</view> -->
			</view>

			<!-- 按钮组重新排版 -->
			<view class="action-buttons">
				<!-- 原有状态按钮 -->
			</view>
		</view>

		<!-- 提交按钮样式升级 -->
		<u-button class="fixed-btn" @click="tijiao()" type="primary" shape="circle">
			<u-icon name="shopping-cart" size="40" color="#fff"></u-icon>
			提交订单
		</u-button>





		<u-modal v-model="showOrderConfirm" title="确认订单" :show-cancel-button="true" cancel-text="再想想" confirm-text=""
			:async-close="true" @cancel="showOrderConfirm = false">
			<view class="order-modal-content">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="info-item">
						<text class="label">商品名称：</text>
						<text class="value">{{ item.PcName}}</text>
					</view>
					<view class="info-item">
						<text class="label">订单金额：</text>
						<text class="value price">￥{{ 4*copies }}</text>
					</view>
					<view class="info-item">
						<text class="label">购买数量：</text>
						<text class="value">{{copies}}份</text>
					</view>
				</view>

				<!-- 支付方式选择 -->
				<view class="payment-methods">
					<text class="payment-title">选择支付方式</text>
					<view class="payment-item wechat-pay" @click="selectedPayment = 'wechat'"
						:class="{active: selectedPayment === 'wechat'}">
						<u-icon name="weixin-fill" color="#09BB07" size="42"></u-icon>
						<text class="payment-name">微信支付</text>
						<u-icon :name="selectedPayment === 'wechat' ? 'checkbox-mark' : 'circle'" color="#09BB07"
							size="36"></u-icon>
					</view>
				</view>
			</view>

			<!-- 自定义底部按钮 -->
			<template #confirm-button>
				<view class="confirm-footer">
					<u-button type="primary" shape="circle" :loading="payLoading" @click="payment()"
						custom-style="width: 100%;height: 80rpx;">
						{{ payLoading ? '支付中...' : '立即支付' }}
					</u-button>
				</view>
			</template>
		</u-modal>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				PcRegNo: '',
				showOrderConfirm: false,
				selectedPayment: 'wechat', // 默认选中微信支付
				payLoading: false,
				orderData: {
					productName: '早餐套餐A',
					totalAmount: 25.00,
					quantity: 2
				},
				list: [{
						name: '1',
						text: '医保支付',
						icon: ''
					},
					{
						name: '2',
						text: '微信支付',
						icon: ''
					}
				],
				nowTime: '',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				copies: '1',
				screenHeight: getApp().globalData.screenHeight - 44,
				PcTestId: '',
				cancellationtext: '取消预约后将无法撤回，是否取消',
				cancellationtext2: '申请退款后将无法撤回，是否退款',
				cancellationshow: false,
				cancellationshow2: false,
				deletetext: '删除记录后无法找回，是否删除',
				deleteshow: false,
				item: {
					PcName: "",
					PcCategoryId: "",
				},
				openid: '',
				sessionkey: '',
				appid: ''
			}
		},

		onLoad(option) {
			this.PcTestId = option.PcTestId
			var timeStr = this.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr
			this.getDetail()
		},
		methods: {

			dateTimeStr(str) {
				var date = new Date(),
					year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
					minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
					second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				hour >= 0 && hour <= 9 ? hour : "";
				minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
				second >= 0 && second <= 9 ? (second = "0" + second) : "";
				if (str.indexOf('y') != -1) {
					str = str.replace('y', year)
				}
				if (str.indexOf('m') != -1) {
					str = str.replace('m', month)
				}
				if (str.indexOf('d') != -1) {
					str = str.replace('d', day)
				}
				if (str.indexOf('h') != -1) {
					str = str.replace('h', hour)
				}
				if (str.indexOf('i') != -1) {
					str = str.replace('i', minute)
				}
				if (str.indexOf('s') != -1) {
					str = str.replace('s', second)
				}
				return str;

			},



			getDetail() {
				uni.showLoading({
					title: '请稍后'
				})
				this.$request("Package", "GetPackageTestDetail", {
					PcTestId: this.PcTestId
				}).then(res => {
					console.log("详情", res)
					if (res.code == 1) {
						this.item = res.data
						uni.hideLoading();

					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}

				})
			},
			deletes() {
				this.$request("Order", "Delete", {
					OrderNo: this.item.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						console.log("res", res)
						if (res.code == 1) {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								duration: 1000
							});
							setTimeout(function() {
								uni.redirectTo({
									url: `/pages/register/Scheduling/record/record?current=${3}`,
									fail(error) {
										console.log(error)
									}
								})
								return
							}, 1000);
						}
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			pays() {
				console.log(this.PcRegNo)
				this.$request("pay", "pay", {
					PcRegNo: this.PcRegNo
				}).then(resto => {
					console.log(resto)
					if (resto.code == 1) {
						uni.showLoading({
							title: '请等待'
						})
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resto.data.Timestamp,
							package: resto.data.Package,
							nonceStr: resto.data.Noncestr,
							signType: resto.data.SignType,
							paySign: resto.data.paySign,
							success: (resshree) => {
								console.log("resshree", resshree)
								uni.showToast({
									title: '支付成功',
									icon: 'none',
									duration: 1000
								});
								setTimeout(function() {
									uni.navigateBack()
									return
								}, 1000);
							},
							fail: (err) => {
								// console.log("err",err)
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 1000
								});
								setTimeout(function() {
									uni.navigateBack()
									return
								}, 1000);
							}

						})

					}

				})

			},
			valChange(e) {
				this.copies = e.value

			},
			tijiao() {


				// uni.redirectTo({
				// 	url: `/pages/payment/ddzf?OrderNo=${OrderNumber}`,
				// 	fail(error) {
				// 		console.log(error)
				// 	}
				// })
				// return
				console.log(11111)

				this.$request("Package", "SubmitPackage", {
					PcCategoryId: this.item.PcCategoryId,
					PcCategorName: this.item.PcCategory,
					PcTestId: this.item.PcTestId,
					PcTestName: this.item.PcName,
					PcBuyCount: this.copies,
					PcRegDate: this.nowTime,
				}).then(res => {
					if (res.code == 1) {
						this.showOrderConfirm = true
						this.PcRegNo = res.data.PcRegNo

					} else {

						uni.showToast({
							title: "订单提交失败",
							icon: "none",
							duration: 1000,
						});

					}

					

					// 				if (res.err_msg == "get_brand_wcpay_request:ok") {
					// 					uni.showToast({
					// 						title: "成功支付",
					// 						icon: "none",
					// 						duration: 1000,
					// 					});
					// 					setTimeout(function() {
					// 						uni.redirectTo({
					// 							url: `/pages/register/Scheduling/record/record?current=${3}`,
					// 							fail(error) {
					// 								console.log(error)
					// 							}
					// 						})
					// 						return
					// 					}, 1000);

					// 				} else {
					// 					uni.showToast({
					// 						title: "支付未成功",
					// 						icon: "none",
					// 						duration: 1000,
					// 					});
					// 					setTimeout(function() {
					// 						uni.redirectTo({
					// 							url: `/pages/register/Scheduling/record/record?current=${2}`,
					// 							fail(error) {
					// 								console.log(error)
					// 							}
					// 						})
					// 						return
					// 					}, 1000);
					// 				}

				})



			},
			payment() {
				// uni.redirectTo({
				// 	url: `/pages/payment/ddzf?OrderNo=${OrderNumber}`,
				// 	fail(error) {
				// 		console.log(error)
				// 	}
				// })
				// return
				this.$request("pay", "pay", {
					PcRegNo: this.PcRegNo
				}).then(resa => {
					console.log("订单号", resa)
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": resa.data.appId, //公众号ID，由商户传入     
							"timeStamp": resa.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": resa.data.nonceStr, //随机串     
							"package": resa.data.package,
							"signType": resa.data.signType, //微信签名方式：     
							"paySign": resa.data.paySign //微信签名 
						},
						function(res) {
							// then.sss=res
							// console.log("支付",res)
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: "成功支付",
									icon: "none",
									duration: 1000,
								});
								setTimeout(function() {
									uni.redirectTo({
										url: `/pages/canteen/canteenList?current=${1}`,
										fail(error) {
											console.log(error)
										}
									})
									return
								}, 1000);

							} else {
								uni.showToast({
									title: "支付未成功",
									icon: "none",
									duration: 1000,
								});
								setTimeout(function() {
									uni.redirectTo({
										url: `/pages/canteen/canteenList?current=${0}`,
										fail(error) {
											console.log(error)
										}
									})
									return
								}, 1000);
							}
						});
				})
				// uni.login({
				//     success: async resCode => {
				// 		console.log("rescode",resCode)
				//         let res = await this.$request('auth', 'getopenid', {
				//             Code: resCode.code
				//         });

				//         if (res.code === 1) {
				// 			console.log("res",res)
				//             this.appid = res.data.appid;
				//             this.sessionkey = res.data.session_key;
				//             this.openid = res.data.openid;
				// 			if(GHF==0){
				// 				return
				// 			}else{
				// 				this.pays()
				// 			}

				//         }
				//     }
				// })
			},
			cancellation() {
				console.log("进了")
				this.$request("Order", "Cancel", {
					OrderNo: this.item.OrderNumber
				}).then(res => {
					console.log("res", res)
					if (res.code == 1) {
						uni.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(function() {
							uni.redirectTo({
								url: `/pages/register/Scheduling/record/record?current=${1}`,
								fail(error) {
									console.log(error)
								}
							})
							return
						}, 1000);
					} else {
						uni.showToast({
							title: '取消失败',
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			refund() {
				console.log("进了")
				this.$request("pay", "refund", {
					OrderNo: this.item.OrderNumber,
					RefundReson: ''
				}).then(res => {
					console.log("res", res)
					if (res.code == 1) {
						uni.showToast({
							title: '退款成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(function() {
							uni.redirectTo({
								url: `/pages/register/Scheduling/record/record?current=${3}`,
								fail(error) {
									console.log(error)
								}
							})
							return
						}, 1000);
					} else {
						uni.showToast({
							title: '退款失败',
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			formattedDatemonth(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					month: 'short'
				}).replace(/\//g, '月');
			},
			formattedDateday(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					day: 'numeric'
				}).replace(/\//g, '月');
			}
		}
	}
</script>

<style>
	@import './canteenDetail.css'
</style>
<style scoped>
	/* 容器样式 */
	.container {
		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
		padding: 30rpx;
	}

	/* 内容卡片 */
	.content-card {
		background: #fff;
		border-radius: 32rpx;
		overflow: hidden;
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.06);
		position: relative;
	}

	/* 图片区域 */
	.image-wrapper {
		position: relative;
		height: 480rpx;
	}

	.main-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	}

	/* 标题区域 */
	.title-section {
		padding: 40rpx 30rpx 20rpx;
		position: relative;
	}

	.title-icon {
		position: absolute;
		left: 30rpx;
		top: -28rpx;
		background: #4f46e5;
		padding: 16rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
	}

	.item-title {
		font-size: 44rpx;
		color: #1f2937;
		font-weight: 600;
		position: relative;

	}

	.category-tag {
		font-size: 24rpx;
		background: #0055ff;
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
		vertical-align: middle;
	}

	/* 通知卡片 */
	.notice-card {
		background: #fff5f5;
		margin: 0 30rpx 30rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		border-left: 8rpx solid #e03131;
	}

	.item-desc {
		font-size: 28rpx;
		color: #e03131;
		margin-left: 12rpx;
	}

	/* 价格区域 */
	.price-section {
		display: flex;
		align-items: baseline;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
	}

	.price-label {
		font-size: 28rpx;
		color: #6b7280;
		margin-right: 16rpx;
	}

	.item-price {
		font-size: 56rpx;
		color: #ef4444;
		font-weight: 700;
		position: relative;
	}

	.item-price::after {

		font-size: 24rpx;
		color: #9ca3af;
		margin-left: 8rpx;
	}

	/* 表单卡片 */
	.form-card {
		background: #f9fafb;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f3f4f6;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.form-label {
		font-size: 32rpx;
		color: #374151;
	}

	.date-display {
		font-size: 28rpx;
		color: #6b7280;
		background: #fff;
		padding: 8rpx 24rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 固定按钮 */
	.fixed-btn {
		position: fixed;
		right: 40rpx;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		z-index: 999;
		width: 300rpx;
		height: 90rpx;
		border-radius: 60rpx !important;
		background: linear-gradient(135deg, #0055ff, #0055ff) !important;
		box-shadow: 0 8rpx 24rpx rgba(79, 70, 229, 0.3);
		font-size: 32rpx;
		letter-spacing: 2rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.fixed-btn::after {
		border: none !important;
	}

	.fixed-btn:active {
		transform: scale(0.95) translateZ(0);
		box-shadow: 0 4rpx 12rpx rgba(79, 70, 229, 0.3);
	}

	/* 加载动画 */
	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}
	}

	.loading-placeholder {
		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		background: #e5e7eb;
		border-radius: 8rpx;
	}




	/* 弹窗内容样式 */
	.order-modal-content {
		padding: 20rpx 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		font-size: 28rpx;
	}

	.price {
		color: #e4393c;
		font-weight: bold;
		font-size: 36rpx;
	}

	/* 支付方式样式 */
	.payment-title {
		display: block;
		margin: 30rpx 0 20rpx;
		color: #666;
		font-size: 26rpx;
	}

	.payment-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-radius: 12rpx;
		background: #f8f8f8;
		margin-bottom: 20rpx;
		transition: all 0.3s;
	}

	.payment-item.active {
		background: #e6f3ff;
		border: 2rpx solid #3B71E8;
	}

	.payment-name {
		margin-left: 20rpx;
		flex: 1;
		font-size: 32rpx;
	}

	/* 底部按钮样式 */
	.confirm-footer {
		height: 100%;

		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>